<template>
  <el-dialog title="产品添加" :visible.sync="dialogFormVisible" @close="handleclose" width="80%">
    <div style="height:400px;">
      <el-form ref="create" :model="form" :rules="rules"  label-width="80px">
        <el-row>
          <el-col :span="18">
            <el-tabs tab-position="left" v-model="activeName" style="height:350px;">
              <!-- 基本参数 -->
              <el-tab-pane label="基本参数" name="base">
                <el-form-item label="产品分类" prop="categoryid">
                  <el-select v-model="form.categoryid" placeholder="请选择">
                    <el-option
                      v-for="item in categoryData"
                      :key="item.id"
                      :label="item.categoryname"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="产品标题" prop="productiontitle">
                  <el-input v-model="form.productiontitle"></el-input>
                </el-form-item>
                <el-form-item label="产品价格" prop="productionprice">
                  <el-input v-model="form.productionprice"></el-input>
                </el-form-item>
              </el-tab-pane>
              <!-- 产品配置信息 -->
              <el-tab-pane label="配置参数" name="option">
                <el-form-item label="产品参数" prop="productionparam">
                  <template v-for="item in form.productionparam">
                    <el-row :key="item.key" >
                      <el-input v-model="item.key" style="width:100px"></el-input>
                      <el-input v-model="item.value" style="width:100px"></el-input>
                    </el-row>
                  </template>
                  <el-button-group>
                    <el-button type="primary" @click="addProductionparam">+</el-button>
                    <el-button type="primary" @click="delProductionparam">-</el-button>
                  </el-button-group>
                </el-form-item>
                <el-form-item label="产品规格" prop="productionsize">
                  <template v-for="(item,index) in form.productionsize">
                    <el-input :key="index" style="width:100px" v-model="form.productionsize[index]"></el-input>
                  </template>
                  <el-button-group>
                    <el-button type="primary" @click="addProductionsize">+</el-button>
                    <el-button type="primary" @click="delProductionsize">-</el-button>
                  </el-button-group>
                </el-form-item>
                <el-form-item label="产品颜色" prop="productioncolor">
                  <template v-for="item in form.productioncolor">
                    <el-input :key="item.id" style="width:100px"></el-input>
                  </template>
                  <el-button-group>
                    <el-button type="primary" @click="addProductioncolor">+</el-button>
                    <el-button type="primary" @click="delProductioncolor">-</el-button>
                  </el-button-group>
                </el-form-item>
              </el-tab-pane>
              <!-- 产品详情 -->
              <el-tab-pane label="产品详情" name="detail">
                <el-form-item label="产品详情" prop="productiondesc">
                  <Editor :editor="'<p>dddddddddddddddddddddddddddddddddddddddd</p>'" @editor='test'/>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>            
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品图片" prop="productiondesc">
              <Upload />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submit">立即创建</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import Editor from "../../components/Editor";
import Upload from "../../components/Upload";
export default {
  name: "create",
  components: {
    Editor,
    Upload
  },
  data() {
    return {
      activeName:'base',
      dialogFormVisible: true,
      categoryData: [],
      content: "",
      form: {
        // 分类
        categoryid: "",
        // 标题
        productiontitle: "",
        // 价格
        productionprice: "0.00",
        // 参数
        productionparam: [{ key: "", value: "" }],
        // 图片
        productionphoto: "",
        // 详情
        productiondesc: "",
        // 型号
        productionsize: [""],
        // 颜色
        productioncolor: [""]
      },
      rules:{
        categoryid:[
          { required: true, message: '请选择产品类型', trigger: 'blur' }
        ],
        productiontitle:[
          { required: true, message: '请输入产品标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        productionprice:[
          { required: true, pattern: /\.\d{2}$/, message: '请输入产品价格，须保留两位小数', trigger: 'blur' }
        ],
        productionphoto:[
          { required: true, message: '请上传商品图片', trigger: 'blur' }
        ],
        productionparam:[
          { required: true, validator: function(rule,value,callback){
            if( value ==  '') {
                this.activeName = 'option';
                callback(new Error('产品参数不能为空'));
            } else {
                callback();
            }
          }.bind(this), message: '产品属性不能为空', trigger: 'blur' }
        ],
        productionsize: [
            { validator: function(rule,value,callback){
                if( value ==  '') {
                    this.activeName = 'option';
                    callback(new Error('产品尺码不能为空'));
                } else {
                    callback();
                }
            }.bind(this), trigger: 'blur' }
        ],
        productioncolor: [
            { validator: function(rule,value,callback){
                if( value ==  '') {
                    this.activeName = 'option';
                    callback(new Error('产品颜色不能为空'));
                } else {
                    callback();
                }
            }.bind(this), trigger: 'blur' }
        ],
        productiondesc: [
            { validator: function(rule,value,callback){
              if( value ==  '') {
                    this.activeName = 'detail';
                    callback(new Error('产品详情不能为空'));
                } else {
                    callback();
                }
            }.bind(this), trigger: 'blur' }
        ]        
      }        
    };
  },
  created() {
    let id = this.$route.query.id;
    this.getAllData();
  },
  methods: {
    addProductionparam(){
      this.form.productionparam.push('')
    },
    delProductionparam(){
      if(this.form.productionparam.length>1){
        this.form.productionparam.pop()
      }      
    },
    addProductionsize(){
      this.form.productionsize.push('')
    },
    delProductionsize(){
      if(this.form.productionsize.length>1){
        this.form.productionsize.pop()
      }      
    },
    addProductioncolor(){
      this.form.productioncolor.push('')
    },
    delProductioncolor(){
      if(this.form.productioncolor.length>1){
        this.form.productioncolor.pop()
      }      
    },
    editor(data) {
      console.log(data);
    },
    uploaded(data) {
      console.log(data);
    },
    getAllData() {
      this.axios
        .get("/api/category/getAllData")
        .then(res => {
          if (res.data.code == 0) {
            this.categoryData = res.data.data;
          } else {
            this.$message("服务器繁忙，请稍后重试");
          }
        })
        .catch(error => {
          this.$message("服务器繁忙，请稍后重试");
        });
    },
    handleclose() {
      this.$router.go(-1);
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    submit(ruleForm) {      
      this.$refs['create'].validate(valid => {
        if (valid) {
          // this.postRoleData();
          this.dialogFormVisible = false;
        } else {
          this.message("表单数据出错，请确认后提交", "error");
          return false;
        }
      });
    },
    // 失败提示
    message(msg, type) {
      this.$message({
        message: msg,
        type
      });
    },
    test(data){
      console.log(data)
    }
  }
};
</script>
